<template>
  <div class="date-week">
    <span class="day">{{ date }}</span>
    <span class="ml30">{{ week }}</span>
    <span class="ml30">{{ time }}</span>
    <div v-if="fullSrceen" class="full ml30" title="全屏/退出全屏" @click="handleFull" />
  </div>
</template>
<script>
export default {
  name: "TimeFunc",
  props: {
    // 全屏按钮
    fullSrceen: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      date: "", // 日期
      time: "", // 时间
      week: "", // 星期
      timer: null, // 时间定时器
      intervalTimer: null, // 刷新定时器
    };
  },
  created() {
    this.getDate();
    this.getTime();
    this.getWeek();
    this.timer = setInterval(() => {
      this.getDate();
      this.getTime();
      this.getWeek();
    }, 1000);
  },
  methods: {
    // 获取日期
    getDate() {
      const time = new Date();
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      if (m < 10) m = "0" + m;
      let d = time.getDate();
      if (d < 10) d = "0" + d;
      this.date = `${y}.${m}.${d}`;
    },
    // 获取时间
    getTime() {
      const time = new Date();
      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();
      if (h < 10) h = "0" + h;
      if (m < 10) m = "0" + m;
      if (s < 10) s = "0" + s;
      this.time = `${h}:${m}:${s}`;
    },
    // 获取星期
    getWeek() {
      const time = new Date();
      let week = time.getDay();
      let weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      this.week = weeks[week];
    },
    // 全屏 / 退出全屏
    handleFull() {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else if (document.webkitFullscreenElement) {
        document.webkitExitFullscreen();
      } else if (document.mozFullScreenElement) {
        document.mozCancelFullScreen();
      } else if (document.msFullscreenElement) {
        document.msExitFullscreen();
      } else {
        const elem = document.documentElement;
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        }
      }
    },
    destroyed() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.date-week {
  font-family: "Swis721 BlkCn BT Black";
  position: absolute;
  right: 20px;
  top: 28px;
  font-weight: 900;
  font-size: 24px;
  color: #acc9e5;
  letter-spacing: 3px;
  .full {
    display: inline-block;
    width: 92px;
    height: 46px;
    background: url("~@/assets/home/icon_full.png");
    vertical-align: middle;
    &:hover {
      cursor: pointer;
      opacity: 0.9;
    }
  }
}
</style>
